<template>
    <div class="sonpopular" >
        <!-- <div> -->
            <router-link to="xq">
                <div class="top">
                    <img :src="img" alt="">
                </div>
                <div class="bottom">
                    <h3>{{h3}}</h3>
                    <p v-if="p">{{p|htext}}</p>
                    <span class="sp1">{{sp1}}</span><span class="sp2">{{sp2}}</span>
                    <p><span class="sp3">{{sp3}}</span><span class="sp4">{{sp4}}</span></p>
                </div>
            </router-link>
        <!-- </div> -->
    </div>
</template>

<script>
export default {
    data(){
        return {}
    },
    filters:{
        htext(val){
            if(val.length>8){
                return val.substr(0,8)+"..."
            }
            else{
                return val
            }
        }
    },
    props:["img","h3","p","sp1","sp2","sp3","sp4"]
}
</script>

<style scoped>
    .sonpopular{
        width: 45%;
        margin-top: 0.05rem;
        font-size: 0.12rem;
    }
    .top{
        border: 1px solid #ddd;
        box-sizing: border-box;
        overflow: hidden;
    }
    img{
        width: 100%;
        height: 100%;
    }
    span{
        margin: 0 0.05rem;
        line-height: 0rem;
    }
    .sp1{
        color: red;
        font-size: 0.16rem;
    }
    .sp2{
        color: rgb(210, 210, 210);
        text-decoration: line-through;
    }
    h3{
        white-space: wrap;
        color: #2e2d2d;
        font-size: 0.14rem;
    }
    p{
        color: rgb(153, 153, 153);
        white-space: nowrap;
        line-height: 0rem;
        
    }
</style>